{extend name="common:base" /}
{block name="page_title"}{$controllerName}详情{/block}
{block name="style"}
<link href="/static/shop/fonts/iconfont.css" rel="stylesheet">
<style>
    ul li{list-style:none;}
    .ui-step .ui-step-number {
        position: relative;
        display: inline-block;
        width: 37px;
        height: 37px;
        margin: 10px 0;
        line-height: 37px;
        background: #f2f3f7;
        color: #cac9c9;
        border-radius: 100%;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        z-index: 2;
    }
    .ui-step li::before, .ui-step li::after {
        position: absolute;
        left: 0;
        top: 27px;
        display: block;
        content: ' ';
        width: 50%;
        height: 4px;
        background: #f2f3f7;
        z-index: 1;
    }
    .ui-step .ui-step-meta {
        color: #ccc;
    }
    .ui-step .ui-step-title {
        color: #333;
        font-size: 12px;
        line-height: 18px;
    }
    .ui-step-4 li {
        width: 24.9999%;
    }
    .ui-step li {
        float: left;
        position: relative;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        text-align: center;
    }
    .ui-step {
        padding: 14px 0 8px 0;
        zoom: 1;
        margin: 0 50px;
    }
    .page-content {
        width: 100%;
        background: #fff;
        padding: 20px 30px;
        position: relative;
        height: auto;
        overflow: hidden;
    }
    .step-region {
        position: relative;
        margin-bottom: 10px;
    }
    .ui-step li:first-child::before {
        width: 0;
    }
    .ui-step li.ui-step-done::before, .ui-step li.ui-step-done::after, .ui-step li.ui-step-done .ui-step-number {
        background: #54c952;
    }
    .ui-step li.ui-step-done .ui-step-number {
        color: #fff;
    }
    .ui-step li::after {
        left: 50%;
    }
    .ui-step:after {
        content: "";
        display: table;
        clear: both;
    }
    .order-container {
        position: relative;
        overflow: hidden;
        border: 1px solid #efefef;
        margin: 0;
    }
    .order-container {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
    }
    .order-title {
        line-height: 62px;
        font-size: 16px;
        color: #000;
        font-weight: bold;
    }
    .order-container-left {
        padding-right: 0;
        padding: 30px !important;
        padding-left: 15px !important;
        padding-bottom: 0px !important;
    }
    .order-container-left {
        -webkit-box-flex: 1;
        -webkit-flex: 1;
        -ms-flex: 1;
        flex: 1;
    }
    .order-container-static {
        -webkit-box-flex: 1;
        -webkit-flex: 1;
        -ms-flex: 1;
        flex: 1;
        padding: 30px 50px 20px;
    }
    .order-container ul {
        margin-bottom: 20px;
        padding-left:0;
    }
    .order-container ul li {
        line-height: 26px;font-size:12px;
    }
    .order-container ul li.text {
        color:#999;
    }
    .order-container ul .text-default {
        color:#000;
    }
    .order-container ul li .col-sm {
        float: left;
        padding-right: 10px;
        padding-left: 10px;
        position: relative;
        width: 80px;
    }
    .order-container .ops {
        height: 40px;
        line-height: 20px;
        margin-bottom: 15px;
    }
    .order-container .ops a {
        margin-right: 20px;
    }
    .ops .btn {
        padding: 5px 10px;
    }
    .order-container .status {
        height: 70px;
        line-height: 22px;
    }
    .detail-table {
        table-layout: fixed;
        position: relative;
        color: #666;
    }
    .detail-table {
        width: 100%;
        max-width: 100%;
        margin-bottom: 20px;
    }
    .detail-table .trorder, .table .trfooter {
        border: 1px solid #efefef;
    }
    .detail-table tr {
        height: 24px;
    }
    .detail-table{font-size:12px;border: 1px solid #efefef;}
    .detail-table .trorder td {
        border-right: 1px solid #efefef;
    }
    .detail-table .trorder td:nth-of-type(1) {
        border: none;
    }
    .detail-table tfoot {
        border-bottom: 1px solid #efefef;
    }
    .detail-table tfoot .price {
        float:right;
    }
    .detail-table tfoot .price-inner {
        display: inline-block;
        vertical-align: middle;
        width: 100px;
        text-align: right;
    }
    .font20{font-size:20px;font-weight:700;}
    .btns span{display:none;}
    .detail-table .price .total_price{font-weight:700;}
    .detail-table .price .payable{font-size:14px;font-weight:700;color: #e4393c}
</style>
{/block}
{block name="content"}
<div class="row">
    <div class="page-content">
        {if(0 != $orderModel['status'])}
        <div class="step-region">
            <ul class="ui-step ui-step-4">
                <li class="ui-step-done">
                    <div class="ui-step-number">1</div>
                    <div class="ui-step-title">买家下单</div>
                    <div class="ui-step-meta">
                        {:date('Y-m-d',$orderModel['create_time'])}<br>{:date('H:i:s',$orderModel['create_time'])}
                    </div>
                </li>
                <li {if($orderModel['status']>=2)}class="ui-step-done"{/if}>
                    <div class="ui-step-number">2</div>
                    <div class="ui-step-title">买家付款</div>
                    <div class="ui-step-meta">
                        {if($orderModel['status']>=2 && !empty($payLog))}
                        {:date('Y-m-d',$payLog['create_time'])}<br>{:date('H:i:s',$payLog['create_time'])}
                        {/if}
                    </div>
                </li>
                <li {if($orderModel['status']>=3)}class="ui-step-done"{/if}>
                    <div class="ui-step-number">3</div>
                    <div class="ui-step-title">
                        商家发货
                    </div>
                    <div class="ui-step-meta">
                        {if($orderModel['status']>=3)}
                        {:date('Y-m-d',$orderModel['oe_update_time'])}<br>{:date('H:i:s',$orderModel['oe_update_time'])}
                        {/if}
                    </div>
                </li>
                <li {if($orderModel['status']>=4)}class="ui-step-done"{/if}>
                    <div class="ui-step-number">4</div>
                    <div class="ui-step-title">订单完成</div>
                    <div class="ui-step-meta"></div>
                </li>
            </ul>
        </div>
        {/if}
        <form class="form-horizontal form" action="" method="post">
            <input type="hidden" name="id" value="9">
            <input type="hidden" name="dispatchid" value="">
            <!--<h3 class="order-title">订单信息</h3>-->
            <div class="row order-container">
                <div class="order-container-left" style="border-right: 1px solid #efefef">
                    <div class="row">
                        <div class="col-md-12">
                            <ul class="">
                                <li class="text"><span class="col-sm">订单编号：</span><span class="text-default">{$orderModel['order_no']}</span></li>
                                <li class="text">
                                    <span class="col-sm">付款方式：</span>
                                    {if($orderModel['status'] < 2)}
                                    <span class="text-default">
                                        未支付
                                    </span>
                                    {else /}
                                    {volist name="$orderModel['pay_log']" id="pl"}
                                    <span>
                                        {switch pl['payment_method']}
                                        {case 1}
                                        <i class="icow icow-yue text-warning" style="font-size: 17px;"></i>
                                        {/case}
                                        {case 2}
                                        <i class="icow icow-kuajingzhifuiconfukuan text-danger" style="font-size:17px"></i>
                                        {/case}
                                        {case 3}
                                        <i class="icow icow-weixinzhifu text-success" style="font-size: 17px"></i>
                                        {/case}
                                        {case 4}
                                        <i class="icow icow-zhifubaozhifu text-primary" style="font-size: 17px"></i>
                                        {/case}
                                        {case 5}
                                        <i class="text-primary icow icow-icon" style="font-size: 17px"></i>
                                        {/case}
                                        {/switch}
                                        <span>{$orderPayLogSiteEnum['payment_method'][$pl['payment_method']]}</span>
                                        <span style="color:#F00;">￥{:number_format(($pl['money']/100),2)}</span>
                                    </span>
                                    {/volist}
                                    {/if}
                                </li>
                                <li class="text">
                                    <span class="col-sm">买家：</span>
                                    <span class="text-default">
                                    <a href="" target="_blank" class="text-primary">
                                        {$orderModel['m_nickname']}
                                    </a>
                                        &nbsp;&nbsp;
                                        <a data-toggle="popover" data-html="true" data-trigger="hover" data-placement="right" data-content="<table style='width:100%;'>
                    <tr>
                        <td  style='border:none;text-align:right;' colspan='2'>
                            <img src='{$orderModel['m_avatar']}' style='width:100px;height:100px;padding:1px;border:1px solid #ccc' onerror='memberAvatarOnerror(this);'/>
                        </td>
                    </tr>
                    <tr>
                        <td  style='border:none;text-align:right;'>ID：</td>
                        <td  style='border:none;text-align:right;'>{$orderModel['member_id']}</td>
                    </tr>
                    <tr>
                        <td  style='border:none;text-align:right;'>昵称：</td>
                        <td  style='border:none;text-align:right;'>
                         {$orderModel['m_nickname']}
                        </td>
                    </tr>
                    <tr>
                        <td  style='border:none;text-align:right;'>姓名：</td>
                        <td  style='border:none;text-align:right;'>
                         {$orderModel['m_realname']}
                        </td>
                    </tr>
                    <tr>
                        <td  style='border:none;text-align:right;'>手机号：</td>
                        <td  style='border:none;text-align:right;'>{$orderModel['m_mobile']}</td>
                    </tr>
                    </table>
    " data-original-title="" title=""><i class="icow icow-help" style="font-size:13px;color:#2f3434;margin-left:-3px"></i></a>
                                </span>
                                </li>
                                <li class="text">
                                    <span class="col-sm">配送方式：</span>
                                    <span class="text-default">
                                        快递
                                </span>
                                </li>
                                <li class="text">
                                    <span class="col-sm">收货人：</span>
                                    {if (!empty($orderModel['address']))}
                                    <span class="text-default">
                                        {$orderModel['address']['province']} {$orderModel['address']['city']} {$orderModel['address']['area']}
                                        {$orderModel['address']['address']}, {$orderModel['address']['realname']}, {$orderModel['address']['mobile']}
                                        <a class="text-primary op js-clip" data-url="{$orderModel['address']['province']} {$orderModel['address']['city']} {$orderModel['address']['area']}
                                        {$orderModel['address']['address']}, {$orderModel['address']['realname']}, {$orderModel['address']['mobile']}">
                                            复制
                                        </a>
                                    </span>
                                    {/if}
                                </li>
                                {if !empty($orderModel['remark'])}
                                <li class="text"><span class="col-sm">买家备注：</span><span class="text-default">{$orderModel['remark']}</span></li>
                                {/if}
                            </ul>
                        </div>
                        <div class="col-md-12 ops">
                            <a class="btn btn-primary btn-xs" style="margin-left:10px"
                               data-toggle="ajaxModal"
                               href="{:url('change_order',['type'=>'address','id'=>$orderModel['id']])}">
                                修改订单收货信息
                            </a>
                        </div>
                    </div>
                </div>
                <div class=" order-container-static">
                    <div class=" status">
                        <span class="text"> 订单状态：</span>
                        {switch orderModel['status']}
                        {case 1}
                        <span class="text-danger font20">待付款</span>
                        {/case}
                        {case 2}
                        <span class="text-info font20">待发货</span>
                        {/case}
                        {case 3}
                        <span class="text-warning font20">待收货</span>
                        {/case}
                        {case 4}
                        <span class="text-success font20">交易完成</span>
                        {/case}
                        {default /}
                        <span class="text-default font20">已关闭</span>
                        {/switch}
                        <i>
                            {switch orderModel['status']}
                            {case 1}
                            （ 等待买家付款）
                            {/case}
                            {case 2}
                            （买家已经付款，请商家尽快发货）
                            {/case}
                            {case 3}
                            （商家已发货，等待买家收货并交易完成）
                            {/case}
                            {case 4}
                            {/case}
                            {default /}
                            {/switch}
                        </i>
                    </div>
                    {if($orderModel['status']>=3)}
                    <div>
                        <ul>
                            <li class="text">
                                快递公司：
                                <span class="text-default">{$orderModel['oe_express_com']}</span>
                            </li>
                            <li class="text">
                                快递单号：
                                <span class="text-default">{$orderModel['oe_express_sn']}</span>
                                <a class="text-primary op" data-toggle="ajaxModal" title="查看物流" data-height="80%"
                                   href="{:url('show_express',[ 'express'=>$orderModel['oe_express'] , 'express_sn'=>$orderModel['oe_express_sn']   ])}">
                                    查看物流
                                </a>
                            </li>
                            <li class="text">
                                发货时间：
                                <span class="text-default">{:date('Y-m-d H:i:s',$orderModel['oe_update_time'])}</span>
                            </li>
                        </ul>
                    </div>
                    {/if}
                    <div class="ops col-md-12" style="padding:0;">
                        <span class="btns">
                            {:widget('Order/ops_btns',['orderId'=>$orderModel['id'],'orderStatus'=>$orderModel['status']])}
                        </span>
                        {if(1 == $orderModel['status'])}
                        <a class="op" data-toggle="ajaxModal" href="{:url('change_price',['id'=>$orderModel['id']])}" title="订单改价">
                            订单改价
                            &nbsp;
                        </a>
                        <a class="op confirm-rst-url-btn" href="{:url('close_order',['id'=>$orderModel['id']])}"
                           data-title="警告"
                           data-info="确认此订单关闭吗？">
                            关闭订单
                            &nbsp;
                        </a>
                        {/if}
                        <a class="op" data-toggle="ajaxModal" href="{:url('change_order',['id'=>$orderModel['id']])}" title="备注">
                            {if !empty($orderModel['seller_remark'])}
                            查看备注
                            {else /}
                            添加备注
                            {/if}
                            &nbsp;
                        </a>
                    </div>
                </div>
            </div>
            <h3 class="order-title">商品信息</h3>
            <table class="table detail-table">
                <thead>
                <tr class="trorder" style="background: #fff">
                    <th class="" style="width: 75px;text-align: right;padding-right: 0">
                        商品标题
                    </th>
                    <th style="">
                    </th>
                    <th style="padding-left: 20px">规格</th>
                    <th style="text-align: center;width: 10%">单价</th>
                    <th style="text-align: center;width: 10%">数量</th>
                    <th style="text-align: center;width: 15%;">合计</th>
                </tr>
                </thead>
                <tbody>
                {volist name="$orderModel['subs']" id="sub"}
                <tr class="trorder" style="background: #fff">
                    <td style="text-align: right;padding-right: 0">
                        <img src="{:getGoodsThumb($sub['goods_thumbs'])}"
                             style="width:52px;height:52px;border:1px solid #efefef; padding:1px;"
                             onerror="this.src='/static/admin/img/nopic.png'">
                    </td>
                    <td style="min-width:300px">
                        <a target="_blank" href="{:url('Goods/edit',['id'=>hashIdEncode($sub['goods_id'])])}"
                           title="查看" style="display:block;line-height: 22px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">
                            {$sub['goods_name']}
                        </a>
                    </td>
                    <td style="padding: 10px 20px">
                        {if ($goodsOptionSpecsVal != $sub['goods_option_specs'])}
                        <p style="white-space:normal;">
                            规格：
                            <span class="label label-primary" data-toggle="popover">
                                {$sub['goods_option_title']}
                            </span>
                        </p>
                        {/if}
                        <!--
                        <p>
                            编码：无
                        </p>
                        <p>
                            条码：无
                        </p>
                        -->
                    </td>
                    <td style="text-align: center">
                        <p>¥{:fenToYuan($sub['market_price'])}</p>
                    </td>
                    <td style="text-align: center">
                        <p>x{$sub['total']}</p>
                    </td>
                    <td style="text-align: center">¥{:fenToYuan($sub['market_price'] * $sub['total'])}</td>
                </tr>
                {/volist}
                </tbody>
                <tfoot style="padding-top: 20px">
                <tr class="trorder">
                    <td colspan="" style="padding-left: 20px">
                    </td>
                    <td colspan="5" style="padding-right: 60px">
                        <div class="price">
                            {:getOrderPriceDetailByModel($orderModel)}
                        </div>
                    </td>
                </tr>
                </tfoot>
            </table>
        </form>

        <div class="box-footer">
            <div class="row">
                <div class="col-xs-2"></div>
                <div class="col-xs-10">
                    <a href="javascript:history.go(-1);" class="btn btn-default">返回列表</a>
                </div>
            </div>
        </div>
    </div>
</div>
{/block}
{block name="script"}
<script>
    $('[data-toggle="tooltip"]').tooltip("destroy").tooltip({
        container: $(document.body)
    });
    $('[data-toggle="popover"]').popover("destroy").popover({
        container: $(document.body)
    });
</script>
{/block}